<template>
  <!-- 选择药企弹窗 -->
  <Modal
      v-model="visible"
      title="添加药品"
      width="1100px"
      class="drugmanagement-departmentdrug-add-choose">
      <div class="Institutionalregistration">
          <div class="container">
              <header class='eone'>
                  <div class="search">
                    <span>药品通用名：</span>
                    <Input v-model.trim="modalFilterObj.ypmc" clearable class='etwo'  />
                    <span class='ethree' >厂家：</span>
                    <Input v-model.trim="modalFilterObj.scqymc" clearable class='etwo' />
                      <Button
                          type="primary"
                          @click="modalSearch()"
                          class='efour'
                      >查询</Button>
                      <Button @click="modalReset" class='efour'>重置</Button>
                  </div>
              </header>
              <div class="list">
                  <Table
                      border
                      :columns="modalColumn"
                      :data="modalData"
                      stripe
                      :loading="modalTableLoading"
                      @on-row-click="onRowClick"
                      no-filtered-data-text="未查询到符合条件的记录"></Table>
              </div>
              <div class="paging">
                  <div>
                  显示第{{modalFilterObj.row * (modalFilterObj.page - 1) + 1}}到第{{modalFilterObj.row * modalFilterObj.page}}条记录，总共{{modalCount}}条记录 每页显示
                  <Select v-model="modalFilterObj.row" class='swidth'  placement="top">
                      <Option v-for="item in modalPageList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                  </Select>条记录
                  </div>
                  <Page
                      :total="modalCount"
                      @on-change="modalPageChange"
                      :page-size="modalFilterObj.row"
                      :current="modalFilterObj.page"
                  ></Page>
              </div>
          </div>
      </div>
      <div class="btn-group">
          <Button class="save" type="primary" :disabled="currentChoose.id !== 0 && !currentChoose.id"  @click="handleModalSave">确认选择</Button>
      </div>
  </Modal>
</template>

<script>
import api from "@/api/commonApi";
import newfourLevelLinkage from "@/components/newfourLevelLinkage";
const modalFilterObj = {
    page: 1,
    row: 10,
    ypmc: '',
    scqymc: null
}
export default {
  components: {
    newfourLevelLinkage
  },
  model: {
    prop: "visible",
    event: "change"
  },
  props: {
    visible: Boolean,
    onCancel: () => {},
    onOk: () => {}
  },
  created() {
  },
  data() {
    return {
      modalFilterObj: this.deepClone(modalFilterObj),
      modalTableLoading: false,
      currentChoose: {},
      modalColumn: [
        {
            title: '选择',
            key: 'id',
            width: 70,
            align: 'center',
            render: (h, params) => {
              let flag = false;
              if (this.currentChoose.id === params.row.id) {
                flag = true
              } else {
                flag = false
              }
              let self = this
              return h('div', [
                h('Radio', {
                  props: {
                    value: flag
                  },
                  on: {
                    'on-change': () => {
                      self.currentChoose = params.row;
                    }
                  }
                })
              ])
            }
        },
        { type: 'index', title: '排序', width: 80, align: 'center' },
        {
          title: "药品通用名",
          key: "ypmc",
          align: "center",
        },
        {
          title: "剂型",
          key: "ypjx",
          align: "center",
        },
        {
          title: "规格",
          key: "ypgg",
          align: "center",
        },
        {
          title: "厂家",
          key: "scqymc",
          align: "center",
        },
        {
          title: "待采购数量",
          key: "purchaseNum",
          align: "center",
        },
        {
          title: "上次供应商",
          key: "prevSupplierName",
          align: "center",
        },
      ],
      modalData: [],
      modalPageList: [
        {
          value: 10,
          label: 10
        },
        {
          value: 20,
          label: 20
        },
        {
          value: 50,
          label: 50
        }
      ],
    }
  },
  mounted() {
  },
  methods: {
    onRowClick(n, o) {
      this.currentChoose = n;
    },
    handleChange() {
      this.$emit("change", [this.fromTime, this.endTime]);
    },
    changeProvince(val) {
      this.modalFilterObj.provinceCode = val;
      this.modalFilterObj.cityCode = null;
      this.modalFilterObj.areaCode = null;
    },
    changeCity(val) {
      this.modalFilterObj.cityCode = val;
      this.modalFilterObj.areaCode = null;
    },
    changeArea(val) {
      this.modalFilterObj.areaCode = val;
    },
    modalSearch() {
        this.findDrugListByPage()
    },
    modalReset() {
        this.modalFilterObj = this.deepClone(modalFilterObj);
        this.findDrugListByPage()
    },
    handleModalSave() {
      this.onOk && this.onOk(this.currentChoose);
    },
    modalPageChange(index) {
        this.modalFilterObj.page = index;
        this.findDrugListByPage();
    },
    findDrugListByPage() {
      this.modalTableLoading = true;
      let body={
        pageNo:this.modalFilterObj.page,
        pageSize:this.modalFilterObj.row,
        scqymc :this.modalFilterObj.scqymc ,
        ypmc:this.modalFilterObj.ypmc,
      }
      this.$axios.post(api.getDrugListByPage, body).then(res => {
          this.modalTableLoading = false;
          if (res.data.code === 1) {
              let ret = res.data.object;
              this.modalData = ret.records;
              this.modalCount = ret.total;
          } else {
            this.$Message.error(res.data.message);
          }
      }).catch((err) => {
      });
    },
    deepClone(obj) {
        return JSON.parse(JSON.stringify(obj))
    },
  },
  watch: {
    visible(n) {
      this.$emit("change", n);
      this.currentChoose = {};
      if (n) {
        this.findDrugListByPage();
      }
    },
    'modalFilterObj.row'() {
      this.findDrugListByPage();
    },
  }
}
</script>

<style scoped lang="less">
.swidth{width:60px;}
.eone{padding-bottom: 20px;}
.etwo{width: 260px}
.ethree{margin-left:30px;}
.efour{margin-left:30px;width:92px;height:32px;}
.drugmanagement-departmentdrug-add-choose {
    /deep/ .ivu-modal-wrap {
        .ivu-modal-footer {
            display: none;
        }
        .btn-group {
            text-align: center;
            .save {
                width: 100px;
                margin-right: 20px;
            }
            .close {
                margin-left: 20px;
                width: 100px;
            }
        }
        .ivu-table .demo-table-info-row td{
            background-color: #02A198;
            color: #fff;
        }
    }
    .paging {
        display: flex;
        justify-content: space-between;
        padding-top: 10px;
    }
}
</style>